function updateOnlineCount(count) {
    $('#onlineCount').text("在线人数: " + count + "人");
}

function updateWatchCount(count) {
    $('.watchCount').text("观战人数: " + count);
}

function updateFreeList(list) {
    const $table = $('<table id="freeList"></table>');
    for (let playerName of list) {
        $table.append('<tr>'
            + '<td class="player">' + playerName + '</td>'
            + '<td>' + '<button class="btn btn-challenge btn-primary" onclick="sendChallenge(\'' + playerName + '\')">挑战</button>' + '</td>'
            + '</tr>');
    }
    if ($('.watch-panel').is(':hidden')) {
        $table.css('display', 'inline');
    } else {
        $table.css('display', 'none');
    }
    $('#freeList').replaceWith($table);
}

function updateRoomList(list) {
    const $table = $('<table id="roomList"></table>');
    for (let id of list) {
        $table.append('<tr>'
            + '<td class="room">房间号: ' + id + '</td>'
            + '<td>' + '<button class="btn btn-watch btn-primary" onclick="watchGame(\'' + id + '\')">观战</button>' + '</td>'
            + '</tr>');
    }
    $('#roomList').replaceWith($table);
}

function challenged(name) {
    const accept = confirm(name + '向你发起挑战，是否接受？');
    handleChallenge(name, accept);
}

function challengeReplied(info) {
    if (!info.accept) {
        alert(info.name + '拒绝了你的挑战');
    }
}

function requestedUndo() {
    const accept = confirm('对方请求悔棋，是否允许？');
    handleUndo(accept);
}

function undoReplied(accept) {
    if (!accept) {
        alert('对方拒绝悔棋');
    }
}

function setGameInfo(info) {
    // 刷新棋盘图片
    updateBoard();
    // 重绘棋盘
    repaint();
    $('#freeList').css('display', 'none');
    $('#roomList').css('display', 'none');
    $('#match_btn').css('display', 'none');
    const roomId = info.roomId;
    const color = info.color === 1 ? '黑' : '白';
    if (color === '黑') {
        $('#turn').text("轮到你了").css('visibility', 'visible');
        $('#wait').css('visibility', 'hidden');
    } else {
        $('#wait').text('等待对方下子......').css('visibility', 'visible');
        $('#turn').css('visibility', 'hidden');
    }
    $('.roomId').text("房间号: " + roomId);
    $('#chessColor').text("我方: " + color);
    $('.game-panel').css('display', 'inline-block');
    $('.gameCanvas').css('display', 'block');
    $('#changeBoard').css('display', 'inline-block');
}

function setTurn() {
    $('#turn').text("轮到你了").css('visibility', 'visible');
    $('#wait').css('visibility', 'hidden');
}

function drawChess(coord) {
    drawOneChess(coord.x, coord.y, coord.color);
    playSound();
    $('#wait').text('等待对方下子......').css('visibility', 'visible');
    $('#turn').css('visibility', 'hidden');
}

function removeChess(coords) {
    wipeOneChess(coords.x, coords.y);
    $('#wait').text('等待对方下子......').css('visibility', 'visible');
    $('#turn').css('visibility', 'hidden');
}

function markChess(coord) {
    markOneChess(coord.x, coord.y);
}

function win(msg) {
    $('#turn').css('visibility', 'hidden');
    $('#wait').css('visibility', 'hidden');
    $('.game-panel').css('display', 'none');
    closeRoom(msg);
}

function lose(msg) {
    $('#turn').css('visibility', 'hidden');
    $('#wait').css('visibility', 'hidden');
    $('.game-panel').css('display', 'none');
    closeRoom(msg);
}

function tie(msg) {
    $('#turn').css('visibility', 'hidden');
    $('#wait').css('visibility', 'hidden');
    $('.game-panel').css('display', 'none');
    closeRoom(msg);
}

function setWatcher(chessList) {
    repaint(chessList);
    $('#freeList').css('display', 'none');
    $('#match_btn').css('display', 'none');
    $('.watch-panel').css('display', 'inline-block');
    $('.gameCanvas').css('display', 'block');
    $('#changeBoard').css('display', 'inline-block');
}

function endWatch(msg) {
    $('.watch-panel').css('display', 'none');
    $('#freeList').css('display', 'inline');
    closeRoom(msg);
}

function pleaseLogin() {
    $('body').remove();
    $('html').append('<body><br><br><a href="pages/user/login.jsp" style="' +
        'text-decoration: underline;' +
        'font-size: 20px;' +
        'color: blue;' +
        'display: inline-block;' +
        'text-align: center"' +
        '>去登录</a></body>')
}

function repaint(chessList) {
    clearBoard();
    drawChessBoard()
    if (chessList) {
        drawAllChess(chessList);
    }
}

function showMessage(msg) {
    alert(msg);
}

function closeRoom(msg) {
    // 不需要在这里设置 freeList/roomList 显示，因为 updateFreeList/updateRoomList 中原来的 list 会被替换掉
    if (msg) {
        alert(msg)
    }
    $('.gameCanvas').css('display', 'none');
    $('#changeBoard').css('display', 'none');
    $('#match_btn').css('display', 'inline-block');
    wipeAllChess();
}

function playSound() {
    const audio = document.createElement('audio');
    audio.src = 'static/sound/move.mp3';
    audio.play();
}